<template>
  <div>
    <!-- 面包屑导航 S -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航 E -->
    <!-- 主体卡片区域 S -->
    <el-card class="box-card">
      <el-button type="primary" @click="openAddCate">添加分类</el-button>
      <template>
        <!--
        // 隔行变色 stripe
        // 是否有边框 border
        // 是否显示表头 show-header
        // 是否显示合计行 show-summary
        // 鼠标停留在行的时候是否高亮显示 show-row-hover
        // 是否在第一列展示自增序号 show-index
        // 是否使用树状表格 tree-type
        // 是否不展开所有子节点 is-fold
        // 展开行 expand-type
        // 复选框 selection-type
        -->
        <zk-table ref="categorieList" index-text="#" :data="categorieList" :columns="columns"
          :stripe="false" border show-header :show-summary="false" :show-row-hover="false"
          show-index tree-type is-fold :expand-type="false" :selection-type="false">
          <!-- 是否有效列 -->
          <template #isDel="{row}">
            <i :class="row.cat_deleted ? 'el-icon-error':'el-icon-success'"></i>
          </template>
          <!-- 排序列 -->
          <template #sort="{row}">
            <el-tag :type="row.cat_level === 0 ? '' : row.cat_level === 1 ? 'success' : 'warning'">
              {{row.cat_level === 0 ? '一' : row.cat_level === 1 ? '二' : '三'}}级
            </el-tag>
          </template>
          <!-- 操作按钮列 -->
          <template #operation="{row}">
            <!-- 编辑按钮 -->
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="openEditCate(row)">
              编辑
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="delCate(row.cat_id)">
              删除
            </el-button>
          </template>
        </zk-table>
        <!-- 分页器 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryData.pagenum" :page-sizes="[5, 10, 15, 20]"
          :page-size="queryData.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total" background>
        </el-pagination>
      </template>
    </el-card>
    <!-- 主体卡片区域 E -->
    <!-- 添加商品分类的提示框 S -->
    <el-dialog title="添加分类" :visible.sync="addCateVisible" width="50%" @close="resetAddCateForm">
      <!-- 添加分类表单 -->
      <el-form ref="addCateForm" :model="addCateForm" label-width="80px" :rules="addCateFormRules">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader :options="parentCateList" clearable :props="cascaderProps" ref="addCascader"
            v-model="checkedNodes">
          </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 提示框按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加商品分类的提示框 E -->
    <!-- 编辑商品分类的提示框 S -->
    <el-dialog v-if="editCateVisible" title="添加分类" :visible.sync="editCateVisible" width="50%"
      @close="resetEditCateData">
      <!-- 编辑分类表单 -->
      <el-form ref="editCateForm" :model="editCateForm" label-width="80px"
        :rules="editCateFormRules">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 提示框按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑商品分类的提示框 E -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类列表
      categorieList: [],
      // 查询分类列表的数据对象
      queryData: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 总分类条数
      total: null,
      // 树状表格的每一列的配置
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '400px'
        },
        {
          label: '是否有效',
          minWidth: '50px',
          type: 'template',
          template: 'isDel'
        },
        {
          label: '排序',
          type: 'template',
          template: 'sort'
        },
        {
          label: '操作',
          minWidth: '200px',
          type: 'template',
          template: 'operation'
        }
      ],
      // 添加分类提示框的开关
      addCateVisible: false,
      // 添加分类的表单数据
      addCateForm: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      // 添加分类的表单校验规则
      addCateFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 获取二级以上的商品分类
      parentCateList: [],
      // 级联选择器的配置
      cascaderProps: {
        label: 'cat_name',
        value: 'cat_id',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      // 级联选择器中被选中的值的集合
      checkedNodes: [],
      // 编辑商品分类提示框的开关
      editCateVisible: false,
      // 编辑商品分类的表单数据
      editCateForm: {
        cat_name: ''
      },
      // 当前操作的分类的ID
      cateId: null,
      // 编辑商品分类的表单校验规则
      editCateFormRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    // 调用获取分类列表函数
    this.getCategorieList()
  },

  methods: {
    // 分类列表函数
    async getCategorieList() {
      const data = await this.$axios.get('/categories', { params: this.queryData })
      if (data.meta.status !== 200) return this.$message.error('获取分类列表失败！')
      this.categorieList = data.data.result
      this.total = data.data.total
    },
    // 分页器选择每页显示数据的条数时触发
    handleSizeChange(pagesize) {
      this.queryData.pagesize = pagesize
      this.getCategorieList()
    },
    // 分页器选择页码时触发
    handleCurrentChange(pagenum) {
      this.queryData.pagenum = pagenum
      this.getCategorieList()
    },
    // 点击添加分类按钮时触发
    openAddCate() {
      // 调用获取二级以上分类函数
      this.getParentCates()
      this.addCateVisible = true
    },
    // 获取二级以上分类函数
    async getParentCates() {
      const data = await this.$axios.get('/categories', { params: { type: 2 } })
      if (data.meta.status !== 200) return this.$message.error('获取分类列表失败！')
      this.parentCateList = data.data
    },
    // 添加分类函数
    addCate() {
      this.$refs.addCateForm.validate(async valid => {
        if (!valid) return
        if (this.checkedNodes.length > 0) {
          // 被添加的分类的父节点是 所有选中节点集合中的最后一项
          this.addCateForm.cat_pid = this.checkedNodes[this.checkedNodes.length - 1]
          // 被添加的分类的级别是 选中节点集合的数组长度
          this.addCateForm.cat_level = this.checkedNodes.length
        }
        const res = await this.$axios.post('/categories', this.addCateForm)
        if (res.meta.status !== 201) return this.$message.error('添加分类失败！')
        this.$message.success('添加分类成功~')
        this.getCategorieList()
        this.addCateVisible = false
      })
    },
    // 关闭添加分类的提示框时触发
    resetAddCateForm() {
      this.$refs.addCateForm.resetFields()
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
      this.checkedNodes = []
    },
    // 点击编辑分类时触发
    openEditCate(row) {
      // 把当前操作的这一行的数据赋值
      this.cateId = row.cat_id
      this.editCateForm.cat_name = row.cat_name
      this.editCateVisible = true
    },
    // 编辑分类名称函数
    async editCate() {
      const res = await this.$axios.put(`/categories/${this.cateId}`, this.editCateForm)
      if (res.meta.status !== 200) return this.$message.error('修改分类名称失败！')
      this.$message.success('修改分类名称成功~')
      this.getCategorieList()
      this.editCateVisible = false
    },
    // 关闭编辑分类名称提示框时触发 重置数据
    resetEditCateData() {
      this.$refs.editCateForm.resetFields()
      this.cateId = null
    },
    // 删除分类函数
    delCate(id) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { meta } = await this.$axios.delete(`/categories/${id}`)
          if (meta.status !== 200) return this.$message.error('删除角色失败！')
          this.$message.success('删除角色成功!')
          this.getCategorieList()
        })
        .catch(() => {
          this.$message('已取消删除')
        })
    }
  }
}
</script>

<style scoped lang='less'>
.el-icon-success {
  color: green;
}
.el-icon-error {
  color: red;
}
.zk-table {
  margin: 15px 0;
}
.el-cascader {
  width: 100%;
}
</style>
